{% extends "base.html" %}
{% block title %}UserProfile{% endblock %}
{% block content %}
<!--atsystem-->
                <!--/span-->
                <div  class="span9" id="content">
                      <!-- morris stacked chart -->

			<div class="row-fluid">
                         <!-- block -->
                        <div class="block">
                            <div class="navbar navbar-inner block-header">
                                <div id="idusername" value="{{user.username}}" class="muted pull-left"><b>{{user.username}} Profile</b></div>
                            </div>
                            <div class="block-content collapse in">
                                <div class="span12">
                                        <!-- BEGIN FORM-->
                                        <form action="#" id="form_sample_1" class="form-horizontal">
                                                <fieldset>
                                                        <div class="alert alert-error hide">
                                                                <button class="close" data-dismiss="alert"></button>
                                                                You have some form errors. Please check below.
                                                        </div>
                                                        <div class="alert alert-success hide">
                                                                <button class="close" data-dismiss="alert"></button>
                                                                Your form validation is successful!
                                                        </div>
                                                        <div class="control-group">
                                                                <label class="control-label"><b>UserName</b><span class="required">*</span></label>
                                                                <div class="controls">
                                                                        <input type="text" id="username" data-required="1" class="input-xlarge focused" readOnly='true'  value="{{user.username}}"/>
                                                                </div>
                                                        </div>
                                                        <div class="control-group">
                                                                <label class="control-label"><b>Email</b><span class="required">*</span></label>
                                                                <div class="controls">
                                                                        <input id="email" type="text" class="input-xlarge focused"  value="{{user.email}}"/>
                                                                </div>
                                                        </div>


<div class="control-group">
                                                                <label class="control-label"><b>Password</b><span class="required">*</span></label>
                                                                <div class="controls">
                                                                       You can change password <a href="/admin/account/userinfo/changepass/{{user.username}}">use this form</a> 
                                                                </div>
                                                        </div>




					{% if p_user.is_superuser %}

                                        <div class="control-group">
                                          <label class="control-label" for="optionsCheckbox"><b>Active</b></label>
                                          <div class="controls">
                                            <label class="uniform">
                                              <input class="uniform_on" type="checkbox" id="isactive"  value="option1" >xxxx
                                            </label>
                                          </div>
                                        </div>



                                        <div class="control-group">
                                          <label class="control-label" for="optionsCheckbox"><b>Superuser</b></label>
                                          <div class="controls">
                                            <label class="uniform">
                                              <input class="uniform_on" type="checkbox" id="issuper" value="option1" $(function())> xxxxx
                                            </label>
                                          </div>
                                        </div>




                                        <div class="control-group">
                                          <label class="control-label" for="selectError"><b>User Group</b></label>
                                          <div class="controls">
                                            <select id="selectgroup">
					    {% for group in groups %}
                                              <option value="{{group}}">{{group}}</option>
					    {% endfor %}
                                            </select>
                                            <span class="help-inline">Woohoo!</span>
                                          </div>
                                        </div>




				                            <div class="form-group">
								<label class="control-label"><b>User Permissions</b></label>
                            					    <div class="controls">
                                					    <select id="groups_left" name="groups" style="height: 200px; width: 350px;" class="form-control m-b" multiple size="12"  ondblclick="moveOption(document.getElementById('groups_left'), document.getElementById('groups_right'))">
										{% for permission in permissions %}
                           					                     <option value="{{permission.name}}">{{permission}}</option>
										{% endfor %}
                                   					    </select>

								<div style="display:inline-block">
										<button  style="display:table;width:90px;margin-top:10px" type='button' class="btn btn-success" onclick="moveOption(document.getElementById('groups_left'),document.getElementById('groups_right'))">Add >></button>
										<button  style="display:table;width:90px;margin-top:10px" type='button' class="btn btn-danger" onclick="moveOption(document.getElementById('groups_right'),document.getElementById('groups_left'))"> << Delete </button>

									</div>
   					                                    <select id="groups_right" name="groups" style="height: 200px; width: 350px;" class="form-control m-b" multiple size="12" ondblclick="moveOption(document.getElementById('groups_right'), document.getElementById('groups_left'))">                    
								<!--	{% for has_per in has_pers %}	
									<option value="">{{has_per}}</option>
 					 				{% endfor %}-->
             					                            </select>
								       </div>
					                            </div>

							{% endif %}
                                                        <div class="form-actions">
                                                                <button type="button" onclick="updata()" class="btn btn-primary">Submit</button>
                                                                <button type="button" class="btn">Cancel</button>
                                                        </div>
                                                </fieldset>
                                        </form>
                                        <!-- END FORM-->
                                </div>
                            </div>
                        </div>


                        <!-- /block -->
                    </div>
</div>


                     <!-- validation -->
            </div>

<script "text/javascript">

function moveOption(obj1, obj2)  
        {  
             for(var i = obj1.options.length - 1 ; i >= 0 ; i--)  
             {  
                 if(obj1.options[i].selected)  
                 {  
                    var opt = new Option(obj1.options[i].text,obj1.options[i].value);  
                    opt.selected = true;  
                    obj2.options.add(opt);  
                    obj1.remove(i);  
                }  
             }  
        }  


function updata(){
var username=$("#username").val();
var email=$("#email").val();
if($("#isactive").is(':checked')){
var active='True';
}
else{
var active='False';
}
if($("#issuper").is(':checked')){
var superuser='True';
}
else{
var superuser='False';
}
var group=$("#selectgroup option:selected").val();
var array1=new Array();
array1.push(username);
array1.push(email);
array1.push(active);
array1.push(superuser);
array1.push(group);

$("#groups_right").each(function(){
var txt = $(this).val();
array1.push(txt);
});


//alert(array1);
$.post('/admin/account/update/',
{
'arraydata':JSON.stringify(array1)
},

function(data){
alert(data);
});
}

$(function init(){
if('{{user.is_active}}' == 'True'){
console.log(document.getElementById("isactive").checked =true);
}
if('{{user.is_superuser}}' == 'True'){
console.log(document.getElementById("issuper").checked =true);
}

});
</script>





{% endblock %}



